import React, { useState } from 'react';
import { Form, Input, Button, Card, Typography, message,Modal } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import { auth } from '../services';

const { Title } = Typography;

const Login = ({ setIsLoggedIn }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const onFinish = async (values) => {
    setLoading(true);

    try {
      const { username, password } = values;
      const response = await auth.login(username, password);

      // if (response.success) {
      //   // auth.js中已经将token存储到localStorage，这里不需要重复存储
      //   setIsLoggedIn(true);
      //   messageApi.success(response.message || '登录成功！');
      //   navigate('/home');
      // } else {
      //   messageApi.error(response.message || '登录失败');
      // }
      if (response.banned) {
        Modal.error({
        title: '登录失败',
        content: response.message || '账号被封禁，请稍后再试',
        });
        } else if (response.success) {
        // auth.js中已经将token存储到localStorage，这里不需要重复存储
        setIsLoggedIn(true);
        messageApi.success(response.message || '登录成功！');
        navigate('/home');
        } else {
          messageApi.error(response.message || '登录失败');
        }        
    } catch (error) {
      messageApi.error(error.message || '登录失败，请检查网络连接');
      console.error('登录出错:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      {contextHolder}
      <Card className="login-card">
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <Title level={2} style={{ color: '#001529' }}>星域 PT</Title>
          <Title level={4} style={{ color: '#8c8c8c' }}>探索无限资源的星际之旅</Title>
        </div>

        <Form
          name="login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="用户名" size="large" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
              size="large"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" loading={loading} size="large">
              登录
            </Button>
            <div style={{ marginTop: 16, textAlign: 'center' }}>
              还没有账号？<Link to="/register">立即注册</Link>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login; 